import React, { FC, useEffect, useState } from 'react';
import * as Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

console.log(HighchartsReact)
interface IHighChartsProps {
};

const HighCharts:FC<IHighChartsProps> = (props: HighchartsReact.Props) => {
  const [option, setOption] = useState<Highcharts.Options>({
    title: {
        text: 'My chart'
    },
    series: [{
        type: 'line',
        data: [1, 2, 3]
    },
    
    ]
  })
  useEffect(() => {
    window.addEventListener('resize',() => { 
      setOption({
        title: {
            text: 'My chart1111111'
        },
        series: [{
            type: 'line',
            data: [1, 5, 3]
        },
        
        ]
      })
    })
  }, [])
  return (
    <>
      <h1>HighCharts</h1>
      <HighchartsReact
        highcharts={Highcharts}
        options={option}
        {...props}
      />
    </>
  )
};

export default HighCharts;